<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Divider orientation="center">订单信息</Divider>
      <Row :gutter="16">
        <Col span="8">
          <div>订单编号: {{ orderInfo.mallOrderCode }}</div>
        </Col>
        <Col span="8">
          <div>商品名称: {{ orderInfo.goodsName }}</div>
        </Col>
        <Col span="8">
          <div>售价: {{ orderInfo.goodsPrice }}</div>
        </Col>
        <Col span="8">
          <div>下单件数: {{ orderInfo.goodsNum == 0 ? '/' : orderInfo.goodsNum }}</div>
        </Col>
        <Col span="8">
          <div>核销门店: {{ orderInfo.poiName }}</div>
        </Col>

        <Col span="8">
          <div>
            订单状态:
            <span
              v-for="item in ORDER_STATE_LIST_YCYD"
              v-if="orderInfo.orderState == item.value"
            >
              {{ item.label }}
            </span>
          </div>
        </Col>
        <Col span="8">
          <div>入场时间:{{ orderInfo.voucherTime }}</div>
        </Col>
        <Col span="8">
          <div>出场时间:{{ orderInfo.pushTime }}</div>
        </Col>
        <Col span="8">
          <div>创建时间:{{ orderInfo.createTime }}</div>
        </Col>
      </Row>
      <Divider orientation="center">联系信息</Divider>
      <Row :gutter="16">
        <Col span="8">
          <div>取件联系人: {{ orderInfo.takeMan }}</div>
        </Col>
        <Col span="8">
          <div>取件联系电话: {{ orderInfo.takePhone }}</div>
        </Col>
        <Col span="8">
          <div>
            取件地址:
            {{ orderInfo.takeProvince }}
            {{ orderInfo.takeCity }}
            {{ orderInfo.takeCounty }}
            {{ orderInfo.takeAddress }}
          </div>
        </Col>

        <Col span="8">
          <div>收件联系人: {{ orderInfo.backMan }}</div>
        </Col>
        <Col span="8">
          <div>收件联系电话: {{ orderInfo.backPhone }}</div>
        </Col>
        <Col span="8">
          <div>
            收件地址:
            {{ orderInfo.backProvince }}
            {{ orderInfo.backCity }}
            {{ orderInfo.backCounty }}
            {{ orderInfo.backAddress }}
          </div>
        </Col>
      </Row>

      <Divider orientation="center">门店备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          {{ orderInfo.factoryRemark }}
        </Col>
      </Row>
      <Divider orientation="center">运营备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <span v-if="type != 'edit'">{{ orderInfo.operateRemark }}</span>
          <Input
            v-else
            v-model="orderInfo.operateRemark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
          />
        </Col>
      </Row>

      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary" v-if="type == 'edit'">
          确认
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import moment from 'moment';
  import { ORDER_STATE_LIST_YCYD } from '@/constant/order';
  export default {
    name: 'order-ope',
    data() {
      return {
        ORDER_STATE_LIST_YCYD,
        isShowModal: false,
        loadingBtn: false,
        orderInfo: { operateRemark: '' },
        goodsInfo: {},
        title: '订单详情',
        type: 'edit'
      };
    },
    methods: {
      // 显示模态框
      show(row, type) {
        this.isShowModal = true;
        this.type = type;
        this.getOrderMallById(row);
      },
      confirm() {
        this.axios
          .post('/orderMall/operateRemark', {
            orderCode: this.orderInfo.mallOrderCode,
            operateRemark: this.orderInfo.operateRemark
          })
          .then(res => {
            this.$Message.success('操作成功.');
            this.isShowModal = false;
          });
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        console.log(row);
        this.axios
          .post('/orderMall/getOrderMallById', {
            mallOrderId: row.mallOrderId
          })
          .then(res => {
            console.log(res);
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.orderInfo = res.data.orderMall;
              this.goodsInfo = res.data.itemList[0];
              if (this.orderInfo.createTime) {
                this.orderInfo.createTime = moment(
                  this.orderInfo.createTime
                ).format('YYYY-MM-DD HH:mm:ss');
              }
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查看订单详情接口报错',
                duration: 0
              });
            }
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      }
    }
  };
</script>

<style scoped lang="less">
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
